<template>
  <div>
    <!-- :color="['red', 'green']" 边框颜色,背景色 -->
    <dv-border-box-1 :color="['#FDFEF8', '#000']" style="width: 500px; height: 500px;">
      <!-- ref 获取dom元素 -->
      <div ref="echats1" style="width: 500px; height: 500px;"></div>
    </dv-border-box-1>
  </div>
</template>

<script>
// 引入echarts包
import * as echarts from 'echarts'
import axios from "axios"
export default {
  // 页面加载完成,自动执行,调用函数
  mounted () {
    this.showCharts()
  },
  // vme
  methods: {
    showCharts () {
      // clg
      console.log(this.$refs.echats1)
      axios.get('https://geo.datav.aliyun.com/areas_v3/bound/450000_full.json').then(res => {
        // 初始化echarts,到div 元素中
        const myChart = echarts.init(this.$refs.echats1)
        // 注册地图(数据放在axios返回对象的data中哦)
        echarts.registerMap('GX', res.data)
        var option = {
          // 配置提示框，有这个配置项即可
          tooltip: {},
          visualMap: {
            min: 1111,
            max: 333332,
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          series: [
            {
              name: '石家庄地图',
              type: 'map',
              // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
              map: 'GX',
              // 显示标签
              label: {
                show: true
              },
              // 地图中心点
              // center: [0, 0],
              // 是否开启鼠标缩放和平移漫游
              roam: 'scale',
              // 缩放限制 比例 最小1倍,最大6倍
              scaleLimit:{
                min: 1,
                max: 6
              },
              // 可以挑选多个
              selectedMode: 'multiple',
              // 地区块的样式
              itemStyle: {
                // 每个地区块颜色
                areaColor: '#4C60FF',
                // 边框颜色
                borderColor: 'rgba(200, 200, 200, 1)',
                // 边框宽度
                borderWidth: 1,
              },
              // 鼠标悬浮高亮
              emphasis: {

                focus: 'item',
                itemStyle: {
                  // 高亮颜色
                  areaColor: {
                    // 渐变
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#00BCFF' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: 'blue' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  borderWidth: 1,
                  // 边框颜色
                  borderColor: 'rgba(200, 200, 0, 1)',
                },
              },

              // 选中样式
              select: {
                itemStyle: {
                  color: '#b50205'
                },
                label: {
                  show: false,
                  textBorderColor: '#fff',
                  textBorderWidth: 2
                }
              },
              data: [
                { name: '南宁市', value: 11111 },
                { name: '崇左市', value: 22221 },
                { name: '柳州市', value: 33333 },
                { name: '来宾市', value: 22231 },
                { name: '桂林市', value: 44441 },
                { name: '梧州市', value: 555525 },
                { name: '贺州市', value: 162475 },
                { name: '玉林市', value: 65454 },
                { name: '贵港市', value: 77771 },
                { name: '百色市', value: 88884 },
                { name: '钦州市', value: 99995 },
                { name: '河池市', value: 10001 },
                { name: '北海市', value: 122222 },
                { name: '防城港市', value: 333332 },
              ]

            }
          ]
        }
        myChart.setOption(option)
      })
    }

  }
}
</script>

<style lang="scss" scoped></style>
